<template>
  <view class="smart-leading-examining">
    <view class="container">
      <view class="bg">
        <img src="/static/images/human.png" alt="" />
      </view>

      <!-- 头 -->
      <view class="head" @click="showPanel('头部')"> </view>
      <!-- 颈部 -->
      <view class="neck" @click="showPanel('颈部')"> </view>
      <!-- 胸部 -->
      <view class="pereion" @click="showPanel('胸部')"></view>
      <!-- 腰腹 -->
      <view class="waist-and-abdomen" @click="showPanel('腰腹')"></view>
      <!-- 上肢 -->
      <view class="upper-limb-1" @click="showPanel('上肢')"></view>
      <view class="upper-limb-2" @click="showPanel('上肢')"></view>
      <!-- 下肢 -->
      <view class="legs-1" @click="showPanel('下肢')"></view>
      <view class="legs-2" @click="showPanel('下肢')"></view>
    </view>

    <!-- 展示部位选择模态框 -->
    <view class="part-panel" v-if="isShowPartPanel">
      <div class="mask" @click="isShowPartPanel = false"></div>
      <view class="mini">
        <view class="part-name">{{ selectPart }}</view>
        <view class="part-item-list">
          <view
            class="part-item"
            v-for="item in panelItems"
            :key="item.id"
            @click="linkTo(item.name)"
            >{{ item.name }}</view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getDataByPart } from "@/api";
export default {
  name: "SmartLeadingExamining",
  data() {
    return {
      panelItems: [],

      selectPart: "",

      isShowPartPanel: false,
    };
  },

  components: {},

  methods: {
    async showPanel(partName) {
      this.selectPart = partName;
      this.isShowPartPanel = true;
      let result = await getDataByPart(partName);
      this.panelItems = result.data;
    },

    linkTo(name) {
      let url = "/pages/SmartLeadingExamining/DiseaseDetail/index?name=" + name;
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.smart-leading-examining {
  .container {
    height: 1172rpx;
    width: 600rpx;
    position: relative;
    margin: 0 auto;
    margin-top: 30rpx;
    .bg {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      img {
        height: 100%;
        width: 100%;
      }
    }

    .head {
      position: absolute;
      top: 0;
      left: 230rpx;
      height: 130rpx;
      width: 150rpx;
      // background: red;
    }

    .neck {
      position: absolute;
      top: 140rpx;
      left: 230rpx;
      height: 50rpx;
      width: 150rpx;
      // background: red;
    }

    .pereion {
      position: absolute;
      top: 200rpx;
      left: 180rpx;
      height: 180rpx;
      width: 240rpx;
      // background: red;
    }

    .waist-and-abdomen {
      position: absolute;
      top: 400rpx;
      left: 180rpx;
      height: 170rpx;
      width: 240rpx;
      // background: red;
    }
    .upper-limb-1 {
      position: absolute;
      top: 400rpx;
      left: 0rpx;
      height: 60rpx;
      width: 340rpx;
      transform: rotate(-70deg) translateX(-100rpx) translateY(-50rpx);
      // background: red;
    }

    .upper-limb-2 {
      position: absolute;
      top: 400rpx;
      right: 0rpx;
      height: 60rpx;
      width: 340rpx;
      transform: rotate(70deg) translateX(100rpx) translateY(-50rpx);
      // background: red;
    }
    .legs-1 {
      position: absolute;
      bottom: 0rpx;
      left: 0rpx;
      height: 80rpx;
      width: 500rpx;
      transform: rotate(-80deg) translateX(230rpx) translateY(-80rpx);
      // background: red;
    }

    .legs-2 {
      position: absolute;
      bottom: 0rpx;
      right: 0rpx;
      height: 80rpx;
      width: 500rpx;
      transform: rotate(80deg) translateX(-230rpx) translateY(-80rpx);
      // background: red;
    }
  }

  .part-panel {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    .mask {
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      opacity: 0;
      z-index: -1;
      position: absolute;
    }
    .mini {
      margin: 0 auto;
      margin-top: 100rpx;
      width: 600rpx;
      background: #fff;
      padding: 40rpx;
      border-radius: 20rpx;
      z-index: 2;

      .part-name {
        text-align: center;
        font-size: 32rpx;
        font-weight: bold;
      }
      .part-item-list {
        margin-top: 30rpx;
        display: flex;
        flex-wrap: wrap;
        .part-item {
          font-size: 30rpx;
          margin-right: 30rpx;
          margin-bottom: 30rpx;
          padding: 15rpx 35rpx;
          background: #eee;
          border-radius: 99rpx;
        }
      }
    }
  }
}
</style>